<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				height: 21000px;
				width: 5400px;
			}
			#menu{
				height: 80px;
				background-color: #009966;
			}
			#nav{
				height: 120px;
				background-color: blue;
			}
			#search{
				/* top:5px;
				left:200px; */
			/* 	position: sticky; */
				height: 30px;
				/* margin: 0 auto; */
				margin-left: 200px;
				width: 700px;
				text-align: center;
				border: 1px solid red;
				border-radius: 15px;
			}
			#search input{
				border:1px solid black;
			}
		</style>
		<script>
			//dd.onclick="";
		 var initHeight=0;
		window.onload=function(){
			//获得元素一开始的距离上边的高度
			var s=document.getElementById("search");
			initHeight=s.offsetTop; 
		}
		 window.onscroll=function(){
			 var y=document.body.scrollTop||document.documentElement.scrollTop;
			 var s=document.getElementById("search");
			 console.log("滚动="+y+",相对高度:"+initHeight);
			 if(y>initHeight-5){
				 s.style.position="fixed";
				 s.style.top="5px";
			 }else{
				 s.style.position="static";
			 }
		 }
		</script>
	</head>
	<body>
		<div id="menu"></div>
		<div id="nav"></div>
		<div id="search">
			<form action="#">
				<input type="search" name="keywords"/>
				<input type="submit" />
			</form>
		</div>
	</body>
</html>
